<script setup></script>

<template>
  <!-- Wrapper -->
  <div id="wrapper">
    <!-- contents -->
    <div class="main_content">
      <div class="main_content_inner">
        <h3>主角列表</h3>

        <div class="sections-small">
          <div
            class="uk-child-width-1-4@m uk-child-width-1-2@s"
            uk-scrollspy="target: > div; cls: uk-animation-slide-bottom-small; delay: 100"
            uk-grid
          >
            <div>
              <router-link :to="{ path: '/info', query: { id: '123' } }">
                <a href="single-channal.html">
                  <div class="channal-card animate-this">
                    <div
                      class="channal-card-thumbnail"
                      data-src="@/assets/images/channals/img-3.jpg"
                      uk-img
                    ></div>
                    <div class="channal-card-body">
                      <div class="channal-card-creator">
                        <img
                          src="@/assets/images/avatars/avatar-5.jpg"
                          alt=""
                        />
                      </div>
                      <h4>Intelligent</h4>
                      <p><span>20K Subscribers . 26 Videos 11M views</span></p>
                    </div>
                  </div>
                </a>
              </router-link>
            </div>

            <div>
              <router-link :to="{ path: '/info', query: { id: '123' } }">
                <a href="single-channal.html">
                  <div class="channal-card animate-this">
                    <div
                      class="channal-card-thumbnail"
                      data-src="@/assets/images/channals/img-3.jpg"
                      uk-img
                    ></div>
                    <div class="channal-card-body">
                      <div class="channal-card-creator">
                        <img
                          src="@/assets/images/avatars/avatar-5.jpg"
                          alt=""
                        />
                      </div>
                      <h4>Intelligent</h4>
                      <p><span>20K Subscribers . 26 Videos 11M views</span></p>
                    </div>
                  </div>
                </a>
              </router-link>
            </div>

            <div>
              <router-link :to="{ path: '/info', query: { id: '123' } }">
                <a href="single-channal.html">
                  <div class="channal-card animate-this">
                    <div
                      class="channal-card-thumbnail"
                      data-src="@/assets/images/channals/img-3.jpg"
                      uk-img
                    ></div>
                    <div class="channal-card-body">
                      <div class="channal-card-creator">
                        <img
                          src="@/assets/images/avatars/avatar-5.jpg"
                          alt=""
                        />
                      </div>
                      <h4>Intelligent</h4>
                      <p><span>20K Subscribers . 26 Videos 11M views</span></p>
                    </div>
                  </div>
                </a>
              </router-link>
            </div>
            <div>
              <router-link :to="{ path: '/info', query: { id: '123' } }">
                <a href="single-channal.html">
                  <div class="channal-card animate-this">
                    <div
                      class="channal-card-thumbnail"
                      data-src="@/assets/images/channals/img-3.jpg"
                      uk-img
                    ></div>
                    <div class="channal-card-body">
                      <div class="channal-card-creator">
                        <img
                          src="@/assets/images/avatars/avatar-5.jpg"
                          alt=""
                        />
                      </div>
                      <h4>Intelligent</h4>
                      <p><span>20K Subscribers . 26 Videos 11M views</span></p>
                    </div>
                  </div>
                </a>
              </router-link>
            </div>
            <div>
              <router-link :to="{ path: '/info', query: { id: '123' } }">
                <a href="single-channal.html">
                  <div class="channal-card animate-this">
                    <div
                      class="channal-card-thumbnail"
                      data-src="@/assets/images/channals/img-3.jpg"
                      uk-img
                    ></div>
                    <div class="channal-card-body">
                      <div class="channal-card-creator">
                        <img
                          src="@/assets/images/avatars/avatar-5.jpg"
                          alt=""
                        />
                      </div>
                      <h4>Intelligent</h4>
                      <p><span>20K Subscribers . 26 Videos 11M views</span></p>
                    </div>
                  </div>
                </a>
              </router-link>
            </div>
            <div>
              <router-link :to="{ path: '/info', query: { id: '123' } }">
                <a href="single-channal.html">
                  <div class="channal-card animate-this">
                    <div
                      class="channal-card-thumbnail"
                      data-src="@/assets/images/channals/img-3.jpg"
                      uk-img
                    ></div>
                    <div class="channal-card-body">
                      <div class="channal-card-creator">
                        <img
                          src="@/assets/images/avatars/avatar-5.jpg"
                          alt=""
                        />
                      </div>
                      <h4>Intelligent</h4>
                      <p><span>20K Subscribers . 26 Videos 11M views</span></p>
                    </div>
                  </div>
                </a>
              </router-link>
            </div>
            <div>
              <router-link :to="{ path: '/info', query: { id: '123' } }">
                <a href="single-channal.html">
                  <div class="channal-card animate-this">
                    <div
                      class="channal-card-thumbnail"
                      data-src="@/assets/images/channals/img-3.jpg"
                      uk-img
                    ></div>
                    <div class="channal-card-body">
                      <div class="channal-card-creator">
                        <img
                          src="@/assets/images/avatars/avatar-5.jpg"
                          alt=""
                        />
                      </div>
                      <h4>Intelligent</h4>
                      <p><span>20K Subscribers . 26 Videos 11M views</span></p>
                    </div>
                  </div>
                </a>
              </router-link>
            </div>
            <div>
              <router-link :to="{ path: '/info', query: { id: '123' } }">
                <a href="single-channal.html">
                  <div class="channal-card animate-this">
                    <div
                      class="channal-card-thumbnail"
                      data-src="@/assets/images/channals/img-3.jpg"
                      uk-img
                    ></div>
                    <div class="channal-card-body">
                      <div class="channal-card-creator">
                        <img
                          src="@/assets/images/avatars/avatar-5.jpg"
                          alt=""
                        />
                      </div>
                      <h4>Intelligent</h4>
                      <p><span>20K Subscribers . 26 Videos 11M views</span></p>
                    </div>
                  </div>
                </a>
              </router-link>
            </div>
          </div>
        </div>
        <BxjPage />
      </div>
    </div>
  </div>
</template>

<style></style>
